<template>
	<view class="mon-container">
		<!-- 这里是循环列表 -->
		<view class="mon-container-top">
			<view
				class="top"
				@click="show(index, item.name)"
				v-for="(item, index) in classList"
				:class="doesCheckoutListContainDropdownItems(item.name) || index == onshow ? 'checked' : ''"
				:key="item.id"
			>
				{{ item.name }}
			</view>
		</view>
		<!-- 繁育次数 -->
		<view class="dropdown" v-show="onshow == 1">
			<view
				class="item_box"
				v-for="(item, index) in dropdownList"
				:key="item.id"
				:class="index == checked_dropdown_num ? 'checked' : ''"
				@click="checked_dropdown(index, item.laber)"
			>
				{{ item.laber }}
			</view>
		</view>
		<!-- 最低价格 -->
		<view class="min_price" v-show="onshow == 2">
			<view
				class="item_box"
				v-for="(item, index) in min_priceList"
				:class="index == checked_price_num ? 'checked2' : ''"
				@click="checked_price(index, min_priceList[index].value)"
				:key="item.id"
			>
				{{ item.laber }}
			</view>
		</view>
		<!-- 种族 -->
		<view class="race" v-show="onshow == 3">
			<view class="item_box" v-for="(item, index) in raceLsit" :class="index == checked_race_num ? 'checked2' : ''" @click="checked_race(index, item.laber)" :key="item.id">
				{{ item.laber }}
			</view>
		</view>
		<!-- 折线图 -->
		<view @click="goline" class="line_chart">
			<image style="width: 55rpx; height: 55rpx" src="../../static/images/line.png" mode=""></image>
		</view>
		<!-- 折线图 -->
		<!-- 点击选项 -->
		<view class="checkout_box" v-for="(item, index) in checkoutList" :key="index">
			<view class="checkout_item">
				{{ item }}
				<u-icon class="checkout_cancel" color="#46A6F8" size="12rpx" name="close" @click="checkout_cancel(item)"></u-icon>
			</view>
		</view>
		<!-- 	<scroll-view
			:refresher-enabled="isOpenRefresh"
			scroll-y="true"
			style="hight: 100vh"
			refresher-background="#1c213a"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			refresher-default-style="none"
			:refresher-threshold="0"
			scroll-anchoring="true"
		>
			<view v-if="showss" class="loading">
				<view class="loadingThree">
					<text></text>
					<text></text>
					<text></text>
					<text></text>
					<text></text>
				</view>
			</view>
			<view v-if="show2" class="releaseLoading">
				<view class="text">释放刷新</view>
			</view> -->
		<!-- 底部列表 -->
		<u-list height="1350rpx" @scrolltolower="scrolltolower" v-if="monList.length != 0">
			<view class="list_duck">
				<u-list-item v-for="(item, index) in monList" :key="item.id">
					<view class="min_ducklist">
						<view class="duck_image">
							<!-- 背景图 -->
							<image @click="Details(item.id)" :src="imgUrl + item.baseImg" mode="" class="imgsos"></image>
							<image v-if="item.isLock == 1" :src="imgUrl + '/static/images/shudan.png'" class="lock" mode="" @click="getInfo"></image>
							<view class="number_duck">#{{ item.number }}</view>
						</view>
						<view class="duck_buttom">
							<view class="name_duck">
								<view class="name">Duck</view>
								
								<view class="num" style="color:#72FFDC;" v-if="item.birthNumber == 0">
									繁育次数：{{ item.birthNumber || '0' }}/5
								</view>
								<view v-else class="num">繁育次数：{{ item.birthNumber || '0' }}/5</view>
								
							</view>
							<view class="price">￥{{ item.price.toFixed(2) }}</view>
						</view>
					</view>
				</u-list-item>
			</view>
		</u-list>
		<view v-if="monList.length == 0">
			<image style="width: 280rpx; height: 280rpx; margin: 275rpx 215rpx 0" src="../../static/images/fighting.gif" mode=""></image>
		</view>
		<realname v-if="isDialogVisible" @closeDialog="closeDialog"></realname>
		<!-- </scroll-view> -->
	</view>
</template>
<script>
import { getMonList, getCollection, getMonEgg } from '@/api/work/market.js';
import { getUserAdmin } from '@/utils/auth';
import config from '@/config.js';
import realname from '../../components/real/realname.vue';
export default {
	components: {
		realname
	},
	data() {
		return {
			isDialogVisible: true,
			triggered: false, //当下下拉状态 true：启动刷新  false：刷新没有触发
			isOpenRefresh: true, // 是否开启下拉
			showss: false, //加载中动画
			show2: false, // 释放刷新动画
			imgUrl: config.gillUrl,
			imgUrl: config.imgUrl,
			classList: [
				{
					name: '全部',
					id: '1'
				},
				{
					name: '繁育次数',
					id: '2'
				},
				{
					name: '最低价格',
					id: '3'
				},
				{
					name: '种族',
					id: '4'
				},
				{
					name: '部件',
					id: '5'
				}
			],
			// 全部
			set_classList: [],
			dropdownList: [
				{
					laber: 0,
					id: '6'
				},
				{
					laber: 1,
					id: '7'
				},
				{
					laber: 2,
					id: '8'
				},
				{
					laber: 3,
					id: '9'
				},
				{
					laber: 4,
					id: '10'
				},
				{
					laber: 5,
					id: '11'
				}
			],
			min_priceList: [
				{
					laber: '最低ID',
					value: 1,
					id: '12'
				},
				{
					laber: '最高ID',
					value: 2,
					id: '13'
				},
				{
					laber: '最低价格',
					value: 3,
					id: '14'
				},
				{
					laber: '最高价格',
					value: 4,
					id: '15'
				},
				{
					laber: '最近的',
					value: 5,
					id: '16'
				}
			],
			raceLsit: [
				{
					laber: '呆呆',
					id: '17'
				},
				{
					laber: '鹈鹕',
					id: '18'
				},
				{
					laber: '秃鹫',
					id: '19'
				},
				{
					laber: '鸽子',
					id: '20'
				},
				{
					laber: '噬者',
					id: '21'
				},
				{
					laber: '拟态',
					id: '22'
				},
				{
					laber: '警长',
					id: '23'
				},
				{
					laber: '保镖',
					id: '24'
				},
				{
					laber: '侦探',
					id: '25'
				}
			],
			isDropdownOpen: false,
			selectedOption: '', // 保存当前选中的选项
			onshow: 0,
			checket_index: 0,
			checked_dropdown_num: -1,
			checked_race_num: -1,
			checked_price_num: -1,
			obj: {
				breedNums: '',
				indexs: [0],
				mature: 1,
				pageNum: 1,
				pageSize: 10,
				races: '',
				types: '',
				specials: ''
			},
			monList: [],
			checkoutList: [],
			total: '',
			scrollTop: 0
		};
	},
	created() {
		this.getMonList();
		this.set_classList = [...this.classList];
	},
	onLoad() {
		this._freshing = false;
		this.triggered = 'restore'; // 需要重置
	},
	methods: {
		goline() {
			uni.navigateTo({
				url: '/pages/market/list' //市值
			});
		},
		closeDialog() {
			this.isDialogVisible = false;
		},
		// 自定义下拉刷新控件被下拉
		onPulling(e) {
			if (e.detail.deltaY <= 0) {
				// 防止上滑页面也触发下拉
				return;
			}
			if (e.detail.deltaY > 100) {
				// 下拉到指定位置 才触发刷新
				this.show2 = true;
			}
		},
		// 自定义下拉刷新被触发
		async onRefresh(e) {
			if (!this.show2) return; // 判断是否触发刷新
			this.show2 = false; // 触发刷新 关闭释放刷新动画
			if (this._freshing) return;
			this.triggered = true; // 启动刷新
			this._freshing = true;
			this.showss = true; // 加载中动画显示
			try {
				await this.getMonList(true); // 在这里调用获取新的列表数据的方法
			} catch (error) {
				console.error('refresh failed', error);
			} finally {
				this.closeRefresh(); // 当数据获取完毕后，关闭下拉刷新
			}
		},
		closeRefresh() {
			// 关闭刷新
			this.triggered = 'restore'; // 需要重置
			this.triggered = false; // 关闭刷新
			this._freshing = false;
			setTimeout(() => {
				this.showss = false; // 加载动画关闭
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 1000
				});
			}, 1000);
		},
		// 自定义下拉刷新被复位
		onRestore() {
			this.triggered = 'restore'; // 需要重置
		},
		// 自定义下拉刷新被中止
		onAbort() {
			this.triggered = 'restore'; // 需要重置
			this._freshing = false;
			this.show2 = false;
		},
		// 点击跳到鸭鸭详情页
		async Details(id) {
			let userDetail = await getUserAdmin();
			if (userDetail.isRealName !== 1) {
				this.isDialogVisible = true;
			} else {
				const res = await getCollection(id);
				if (res.code === 200) {
					uni.navigateTo({
						url: '/pages/MarketOrder/Details?id=' + id + '&isParents=2' + '&raceFlag=1' // 跳转到目标页面的路径 萌宝详情页
					});
				}
			}
		},
		getInfo() {
			this.$modal.showToast('订单已被别人光顾，请稍候再来哟~~');
		},
		doesCheckoutListContainDropdownItems(name) {
			if (name == '繁育次数') {
				return this.checkoutList.some((item) => {
					return this.dropdownList.some((dropdownItem) => dropdownItem.laber + '次' == item);
				});
			} else if (name == '种族') {
				return this.checkoutList.some((item) => {
					return this.raceLsit.some((dropdownItem) => dropdownItem.laber == item);
				});
			} else if (name == '最低价格') {
				return this.checkoutList.some((item) => {
					return this.min_priceList.some((dropdownItem) => dropdownItem.laber == item);
				});
			}
		},
		testItems(list) {
			return this.checkoutList.some((item) => {
				return dropdownList.some((dropdownItem) => dropdownItem.laber == item);
			});
		},
		checkout_cancel(val) {
			if (this.min_priceList.some((item) => item.laber === val)) {
				this.obj.indexs = this.obj.indexs.filter((item) => item !== 2);
				this.obj.types = '';
				this.checkoutList = this.checkoutList.filter((item) => item !== val);
				if (this.checkoutList.length === 0) {
					this.initMonList();
				}
				this.monList = [];
				this.getMonList();
			} else if (this.raceLsit.some((item) => item.laber === val)) {
				this.obj.indexs = this.obj.indexs.filter((item) => item !== 3);
				this.obj.races = '';
				this.checkoutList = this.checkoutList.filter((item) => item !== val);
				if (this.checkoutList.length === 0) {
					this.initMonList();
				}
				this.monList = [];
				this.getMonList();
			} else if (this.dropdownList.some((item) => item.laber + '次' == val)) {
				this.obj.indexs = this.obj.indexs.filter((item) => item !== 1);
				this.obj.breedNums = '';
				this.checkoutList = this.checkoutList.filter((item) => item !== val);
				if (this.checkoutList.length === 0) {
					this.initMonList();
				}
				this.monList = [];
				this.getMonList();
			}
			if (this.checkoutList.length === 0) {
				this.onshow = 0;
			}
		},

		async getMonList(isRefresh) {
			if (isRefresh) {
				this.monList = []; // 清空列表
				this.obj.pageNum = 1; // 重置页码
			}
			const res = await getMonList(this.obj);
			this.total = res.data.total;
			let _this = this;
			res.data.res.forEach((item) => {
				_this.monList.push(item);
			});
		},
		scrolltolower() {
			if (this.monList.length < this.total) {
				this.obj.pageNum++;
				this.getMonList();
			} else {
				return;
			}
		},
		initMonList() {
			this.checked_dropdown_num = -1;
			this.checked_race_num = -1;
			this.checked_price_num = -1;
			this.obj = {
				breedNums: '',
				indexs: [0],
				mature: 1,
				pageNum: 1,
				pageSize: 10,
				races: '',
				types: '',
				specials: ''
			};
		},
		show(index, name) {
			this.onshow = this.onshow === index ? -1 : index;
			if (name == '全部') {
				this.classList = [...this.set_classList];
				this.obj.mature = 1;
				this.monList = [];
				this.initMonList();
				this.getMonList();
				this.checkoutList = [];
			}
		},

		toggleDropdown() {
			this.isDropdownOpen = !this.isDropdownOpen;
		},
		removeDuplicatesFromCheckoutList() {
			this.checkoutList = this.checkoutList.filter((item) => {
				const checkoutValue = item;
				return !this.dropdownList.some((dropdownItem) => dropdownItem.laber + '次' == checkoutValue);
			});
		},
		removeCheckoutList(list, laber) {
			this.checkoutList = this.checkoutList.filter((item) => {
				const checkoutValue = item;
				return !list.some((dropdownItem) => dropdownItem.laber == checkoutValue);
			});
		},
		checked_dropdown(index, val) {
			this.checked_dropdown_num = index;
			this.obj.indexs.push(1);
			this.obj.indexs = this.obj.indexs.filter((item, index, self) => item !== 0 && self.indexOf(item) === index);
			this.obj.breedNums = val;
			this.monList = [];
			this.obj.pageNum = 1;
			this.getMonList();
			this.removeDuplicatesFromCheckoutList();
			this.checkoutList.push(val + '次');
			this.onshow = -1;
		},

		checked_price(index, val) {
			this.checked_price_num = index;
			this.obj.indexs.push(2);
			this.obj.indexs = this.obj.indexs.filter((item, index, self) => item !== 0 && self.indexOf(item) === index);
			this.obj.types = val;
			this.monList = [];
			this.obj.pageNum = 1;
			this.getMonList();
			this.removeCheckoutList(this.min_priceList, 'laber');
			this.onshow = -1;
			this.checkoutList.push(this.min_priceList[index].laber);
		},
		checked_race(index, val) {
			this.checked_race_num = index;
			this.obj.indexs.push(3);

			this.obj.indexs = this.obj.indexs.filter((item, index, self) => item !== 0 && self.indexOf(item) === index);
			this.obj.races = val;
			this.monList = [];
			this.obj.pageNum = 1;
			this.getMonList();
			this.removeCheckoutList(this.raceLsit, 'laber');
			this.checkoutList.push(val);
			this.onshow = -1;
		},

		activated() {
			// 当页面激活时，恢复滚动位置
			this.$nextTick(() => {
				const scrollPosition = localStorage.getItem('scrollPosition');
				if (scrollPosition) {
					this.$refs.scrollArea.scrollTop = parseInt(scrollPosition, 10);
				}
			});
		},
		deactivated() {
			// 当页面离开时，保存滚动位置
			localStorage.setItem('scrollPosition', this.$refs.scrollArea.scrollTop);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep .u-tabs__wrapper__nav__line {
	display: none !important;
}

.mon-container {
	width: 100%;
	padding: 10rpx 38rpx 0;
	.releaseLoading {
		position: relative;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		font-size: 32rpx;
		font-family: 'font';
		background-color: rgba(0, 0, 0, 0);
		.text {
			width: 680rpx;
			top: -70rpx;
			left: 0;
			position: absolute;
		}
	}

	.loading {
		z-index: 1;
		padding-bottom: 110rpx;
		background-color: rgba(0, 0, 0, 0);
		height: 50rpx;
		position: relative;

		.loadingThree {
			position: absolute;
			top: 0;
			left: -34.88rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			background-color: rgba(0, 0, 0, 0);
		}

		.loadingThree text {
			display: inline-block;
			width: 15rpx;
			height: 15rpx;
			margin-right: 5rpx;
			border-radius: 50%;
			background: #46a6f8;
			-webkit-animation: load 1.04s ease infinite;
		}

		.loadingThree text:last-child {
			margin-right: 0rpx;
		}

		@-webkit-keyframes load {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		.loadingThree text:nth-child(1) {
			-webkit-animation-delay: 0.13s;
		}

		.loadingThree text:nth-child(2) {
			-webkit-animation-delay: 0.26s;
		}

		.loadingThree text:nth-child(3) {
			-webkit-animation-delay: 0.39s;
		}

		.loadingThree text:nth-child(4) {
			-webkit-animation-delay: 0.52s;
		}

		.loadingThree text:nth-child(5) {
			-webkit-animation-delay: 0.65s;
		}
	}

	// 底部列表
	.list_duck {
		width: 680rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.min_ducklist {
			width: 318rpx;
			height: 408rpx;
			margin-bottom: 45.35rpx;
			border-radius: 9rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		.duck_image {
			position: relative;
			width: 316rpx;
			height: 316rpx;
			border-top: 1rpx solid #3c424d;
			border-left: 1rpx solid #3c424d;
			border-right: 1rpx solid #3c424d;
			border-radius: 9rpx 9rpx 0rpx 0rpx;

			image {
				width: 316rpx;
				height: 316rpx;
				background: #648bd8;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
			}

			.lock {
				width: 316rpx;
				height: 316rpx;
				border-radius: 9rpx 9rpx 0rpx 0rpx;
				position: absolute;
				z-index: 100;
				left: 0;
				opacity: 0.6;
			}
		}

		.number_duck {
			top: 17.44rpx;
			left: 17.44rpx;
			background: rgba(40, 44, 52, 0.8);
			border-radius: 17rpx;
			position: absolute;
			padding: 5rpx 10rpx 2rpx 10rpx;
			font-family: 'font';
			font-weight: 500;
			color: #46a6f8;
			font-size: 24rpx;
		}

		.duck_buttom {
			width: 316rpx;
			height: 110rpx;
			border-bottom: 1rpx solid #3c424d;
			border-left: 1rpx solid #3c424d;
			border-right: 1rpx solid #3c424d;
			background: #211f30;
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;
			border-radius: 0rpx 0rpx 9rpx 9rpx;

			.name_duck {
				.name {
					font-size: 25rpx;
					font-family: 'font';
					font-weight: 500;
					color: #ffffff;
					margin: 18rpx 0 0 17rpx;
				}

				.num {
					font-size: 20rpx;
					font-family: 'font';
					font-weight: 500;
					color: #8a92a3;
					margin: 15rpx 0 5rpx 17rpx;
				}
			}

			.price {
				font-size: 24rpx;
				font-family: 'font';
				font-weight: 500;
				color: #ffffff;
				margin-top: 58rpx;
				margin-right: 17rpx;
			}
		}
	}

	// 底部列表
	// 选项第一列表
	.mon-container-top {
		margin-bottom: 60rpx;
		width: 550rpx;
		justify-content: space-between;
		display: flex;

		.top {
			color: #8a92a3;
			font-size: 24rpx;
			font-weight: 500;
			font-family: 'font';
			background: #130f26;
			border-radius: 14rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			padding: 8rpx 15rpx 10rpx 15rpx;
		}
	}

	// 选项第一列表
	// 最低价格
	.min_price {
		position: absolute;
		left: 275rpx;
		top: 70rpx;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 115rpx;
		background: #15132a;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		opacity: 0.9;
		border: 2rpx solid #282c34;

		.item_box {
			line-height: 57rpx;
			text-align: center;
			width: 100rpx;
			height: 57rpx;
			font-size: 24rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}

		& > :not(:last-child) {
			border-bottom: #282c34 solid 2rpx;
		}
	}
	// 最低价格
	.line_chart {
		top: 10rpx;
		right: 40rpx;
		z-index: 9999;
		position: absolute;
	}
	// 种族
	.race {
		top: 70rpx;
		left: 406rpx;
		width: 94rpx;
		opacity: 0.9;
		z-index: 999;
		display: flex;
		position: absolute;
		align-items: center;
		background: #15132a;
		flex-direction: column;
		border: 2rpx solid #282c34;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		.item_box {
			line-height: 57rpx;
			text-align: center;
			width: 80rpx;
			height: 57rpx;
			font-size: 24rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}

		& > :not(:last-child) {
			border-bottom: #282c34 solid 2rpx;
		}
	}

	// 种族

	// 繁育次数
	.dropdown {
		z-index: 999;
		padding: 0 5rpx;
		position: absolute;
		left: 130rpx;
		top: 70rpx;
		text-align: center;
		display: flex;
		align-items: center;
		height: 47rpx;
		background: #15132a;
		border-radius: 9rpx;
		border: 2rpx solid #282c34;

		.item_box {
			line-height: 25rpx;
			margin: 9rpx;
			width: 30rpx;
			height: 30rpx;
			background: #211f30;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
			// opacity: 1;
			border: 2rpx solid #282c34;
			font-size: 24rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}
	}

	// 繁育次数
	// 点击高亮
	.checked {
		color: #46a6f8 !important;
		border-color: #46a6f8 !important;
	}

	.checked2 {
		color: #46a6f8 !important;
	}

	.checked3 {
		color: #46a6f8 !important;
	}

	// 点击高亮

	// 点击选出
	.checkout_box {
		position: relative;
		top: -40rpx;
		display: inline-block;
		margin-right: 20rpx;

		.checkout_item {
			padding: 10rpx 30rpx 10rpx 20rpx;
			font-weight: 400;
			background: #15142d;
			color: #46a6f8;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 9rpx 9rpx 9rpx 9rpx;
			font-size: 20rpx;
		}

		.checkout_cancel {
			position: absolute;
			top: 10rpx;
			right: 5rpx;
		}
	}
}
</style>
